
 
 <template>
 	<view class="login-content">
 		<view class="login-title" >
 			注册账号
 		</view>
 		<view class="iphone">
 			<input type="text"  placeholder="用户名:" v-model="zhanghaoValue" @input="clearInput"/>
 			<uni-icons type="closeempty" color="#808080" size="25" v-if="showClearIcon" @click="clearIcon"></uni-icons>
 		</view>
 		<view class="password" v-if="type==2">
 			<!-- <input type="password" placeholder="输入密码" /> 要显示密码就不要设置type="password"-->
 			<input placeholder="设置密码:" v-model="passwordValue" :password="showPassword" />
			<!-- <input placeholder="确认密码:" v-model="newpasswordValue" :password="showPassword" /> -->
 			<uni-icons type="eye-filled" color="#808080" size="25" @click="changePassword"></uni-icons>
 		</view>
 		<view class="login-btn" @click="register">确认注册</view>
 	</view>
 </template>
  
 <script>
 	export default {
 		data() {
 			return {
 				zhanghaoValue: '', 
 				passwordValue: '', //密码
				newpasswovalue:'',
 				showPassword: true, //是否显示密码
 				showClearIcon: false, //是否显示清除按钮
 				type: 2, //登录的状态
 			}
 		},
  
 		methods: {
 			// 显示隐藏密码
 			changePassword: function() {
 				this.showPassword = !this.showPassword;
 			},
 			// 判断是否显示清除按钮
 			clearInput: function(event) {
 				this.zhanghaoValue = event.detail.value;
 				if (event.detail.value.length > 0) {
 					this.showClearIcon = true;
 				} else {
 					this.showClearIcon = false;
 				}
 			},
 			// 清除内容/隐藏按钮
 			clearIcon: function() {
 				this.iphoneValue = '';
 				this.showClearIcon = false;
 			},
 			// 切换登录的方式
 			setLoginType(type) {
 				this.type = type
 			},
			register(){
				uni.request({
					url:'http://139.198.187.252:8081/register',
					method:'POST',
					data:{"userName":this.zhanghaoValue,"password":this.passwordValue},
					success:(res)=> {
						
						console.log(res)
						uni.navigateTo({
							url:'../again/again'
						})
					}
				})
			}
 		}
 	}
 </script>
  
 <style scoped>
 	.login-content {
 		padding: 70px 10px 35px;
 		text-align: center;
 		color: #333333;
 	}
  
 	.login-title {
 		font-size: 26px;
 		font-weight: bold;
 		margin-bottom: 31px;
 	}
  
 	.login-content input {
 		height: 50px;
 		background: #F8F8F8;
 		border-radius: 25px;
 		text-align: left;
 		padding: 15px;
 		box-sizing: border-box;
 		font-size: 15px;
 	}
  
 	.iphone,
 	.password,
 	.test {
 		position: relative;
 		margin-bottom: 30px;
 	}
  
 	.iphone .uni-icons,
 	.password .uni-icons {
 		position: absolute;
 		top: 14px;
 		right: 30px;
 	}
  
 	.test-btn,
 	.password-btn {
 		color: #ff8b33;
 		font-size: 15px;
 		text-align: right;
 	}
  
 	.get-test {
 		color: #ff8b33;
 		font-size: 15px;
 		width: 122px;
 		height: 50px;
 		border: 1px solid #FF8B33;
 		border-radius: 25px;
 		line-height: 50px;
 	}
  
 	.test {
 		display: flex;
 		justify-content: space-between;
 	}
  
 	.login-btn {
 		width: 355px;
 		height: 45px;
 		background: #FF8B33;
 		border-radius: 36px;
 		color: #fff;
 		font-size: 20px;
 		text-align: center;
 		line-height: 45px;
 		position: fixed;
 		bottom: 60px;
 	}
 </style>